import { useState,useRef,useMemo } from 'react';
import CommodityList from './CommodityList';
import './app.css'

function App(){
	const [data,setData] = useState([
		{
			id:1,
			name:"Iphone 12 - 256G",
			price:"7999",
			amount:1,
			checked:false
		},
		{
			id:2,
			name:"华为手机",
			price:"5999",
			amount:1,
			checked:false
		},
		{
			id:3,
			name:"Iphone 12 Plus",
			price:"10000",
			amount:1,
			checked:false
		}
	])
	// const [checkedCommodityNub,setCheckedCommodityNub] = useState(0)
	
	// console.log(data)
	
	const nameInput = useRef()
	const priceInput = useRef()
	
	const checkeTotalNub = useMemo(()=>{
		let num = 0;
		data.forEach( (item,index) =>{
			if(item.checked === true){
				num += item.amount
			}
		} );		
		return num;
	},[data])
	
	const checkeTotalPrice = useMemo(()=>{
		let price = 0;
		data.forEach( (item,index) =>{
			if(item.checked === true){
				price += item.amount*item.price
			}
		} );		
		return price;
	},[data])
	
	const MaxPriceCommodity = useMemo(()=>{		
		
		let max = {}	
		let checkedData = data.filter( item => item.checked === true );		
		checkedData.sort( (item1,item2) => item2.price-item1.price )	 
		console.log(checkedData);
		if( checkedData.length>0 ){
			max = checkedData[0]	
		}			
		return max
		
	},[data])
	
	const addCommodity = (newData) => {
		setData([...data,newData])
	}  
	
	// Decrease || Increase
	const amountChange = (id,amount) => {
		const newData = data.map( item => {
			if(item.id === id){
				return {
					...item,
					amount
				}
			}
			return item
		})
		setData(newData)
	}
	
	// checkbox 选择
	const changeChecked = (id,checked) =>{
		setData(data.map( item =>{
			if(item.id === id){
				return {
					...item,
					checked
				}
			}
			return item
		}))
	}
	
	// 数量递减到0，删除对应数据 
	const removeCommodity = (id) =>{
		setData(data.filter( item => item.id !== id))
	}
	

	return (
		<div className="main">
			<div className="add-box">
			  <input type="text" ref = { nameInput } placeholder="输入商品名称" className="input" />
			  <input type="number" ref = { priceInput } placeholder="输入商品单价（只能输入数字）" className="input" />
			  <button onClick = {()=>{
					const name = nameInput.current.value;
					const price = priceInput.current.value;								
					if(!name.trim()){
						console.log("商品名称不能为空")
						return 
					}
					if(!price.trim()){
						console.log("商品单价不能为空")
						return 
					}				
					const newData = {
						id:new Date().getTime(),
						name,
						price,
						amount:1,
						checked:false
					}
					addCommodity(newData)				
				}}  className="btn">添加商品</button>
			</div> 
			<CommodityList
				data={data}
				amountChange = {amountChange}
				removeCommodity = {removeCommodity}
				changeChecked = {changeChecked}
			/>
			<div>
				<p>当前选中商品，总件数 { checkeTotalNub } 件总价为￥{checkeTotalPrice} </p>
				<p>其中最贵商品为 {MaxPriceCommodity.name}，单价是 ￥ {MaxPriceCommodity.price}</p>
			</div>
		</div>
	)
}

export default App